<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>支付页面</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	</head>
	<style type="text/css">
		.status{text-align: center;margin-top: 0.6rem;}
		.status .icon-zhifushibai{font-size: 2.8rem;color: #EF4F4F;}
		.status .icon-zhifuchenggong{font-size: 2.8rem;color: #09BB07;}
		.text{font-size: 0.5rem;color: #3D4045;text-align: center;}
		.button{height: 0.7rem;width: 5rem;border:#09BB07 1px solid;font-size: 0.3rem;color:#09BB07;margin: 0.8rem auto;border-radius: 3px;}
	</style>
	<body>
		<div id="app">
		<div class="status">
			<i class="icon iconfont" v-bind:class="showLogo"></i>
		</div>
		<div class="text">
			<p style="margin-top: 0.4rem;font-size: 0.3rem;">{{paytext}}</p>
			<p style="margin-top: 0.3rem;">￥{{money}}元</p>
		</div>
		<div class="button flex flex-align-center flex-pack-center"><p>{{buttontext}}</p></div>
		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript">
		!(function(doc, win) {
        var docEle = doc.documentElement,//获取html元素
            event = "onorientationchange" in window ? "orientationchange" : "resize",//判断是屏幕旋转还是resize;
            fn = function() {
                var width = docEle.clientWidth;
                width && (docEle.style.fontSize = 50 * (width / 375) + "px");//设置html的fontSize，随着event的改变而改变。
            };
        win.addEventListener(event, fn, false);
        doc.addEventListener("DOMContentLoaded", fn, false);
    }(document, window));
   var app = new Vue({
    	el:'#app',
    	data:{
    		paytext: '支付成功',
    		money: '10000.00',
    		buttontext: '完成',
    		paystatus: false
    	},
    	methods: {
    		
    	},
    	computed: {
    		showLogo: function(){//改变图标
    			if(this.paystatus){
    				return {
    					'icon-zhifuchenggong': true,
    				}
    			}else{
    				return {
    					'icon-zhifushibai': true,
    				}
    			}
    		}
    	}
    })
	</script>
</html>
